<template>
	<div id="container">
		<header>
			<van-icon name="cross" slot="left" class="log-left" @click="mine()"/>
			<span class="log-right" @click="reg()">新会员注册</span>
		</header>
		<div id="content">
			<!-- 头像 -->
			<van-image round width="77px" height="77px" :src="img" />
			<!-- 文字 -->
			<p class="log-p">欢迎登录</p>
			<!-- 输入框 -->
			<input v-model="username" type="text" class="log-ipt" placeholder="请输入用户名">
			<input v-model="password" type="password" class="log-ipt" placeholder="请输入密码">
			<!-- 按钮 -->
			<van-button type="danger" class="log-login" @click="login()">登录</van-button>
		</div>
		<footer>
			<!-- 链接 -->
			<van-divider class="log-link" :style="{ color: '#999999', borderColor: '#555555', padding: '0 16px'}">
				第三方登录
			</van-divider>
			<!-- 链接图片 -->
			<div class="log-linkpic">
				<div class="log-pics">
					<van-icon class="iconfont" class-prefix='icon' name='weixindenglu' />
					<p>微信</p>
				</div>
				<div class="log-pics">
					<van-icon class="iconfont" class-prefix='icon' name='QQ1' />
					<p>QQ</p>
				</div>
				<div class="log-pics">
					<van-icon class="iconfont" class-prefix='icon' name='zhifubao' />
					<p>支付宝</p>
				</div>
				<div class="log-pics">
					<van-icon class="iconfont" class-prefix='icon' name='weibo' />
					<p>微博</p>
				</div>
			</div>
			<!-- 帮助电话 -->
			<a class="log-tel" href="tel:4008898000">遇到问题？东东帮您></a>
		</footer>


	</div>
</template>

<script>
	import * as api from '../../api/postlogin'
	import {Dialog} from 'vant'
	export default {
		name: 'Login',
		data(){
			return{
				username:'',
				password:'',
				img:''
			}
		},
		methods:{
			reg(){
				this.$router.push('/register')
			},
			mine(){
				this.$router.go(-1)
			},
			login(){
				api.postLogin({username:this.username,password:this.password}).then((data)=>{
					if(data.data.code==200){
						this.img='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572930040869&di=f28f53accfc15fdff85014d7b3322691&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201809%2F14%2F20180914150259_ScPvi.jpeg'
						let uid=data.data.uid
						let token=data.data.token
						let username =this.username+"会员"
						this.$store.commit('login',{username,uid,token})
							Dialog({message:data.data.msg}).then(()=>{
								this.$router.push('/mine')
							})
					}else{
						Dialog({message:data.data.msg})
					}
				})
			}
		}

	}
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
	}
	#container {	
		overflow: hidden;
	}
/* -------------------------头部 -----------------------*/
	header {
		height: 48px;
		line-height: 48px;
	}
	.log-left {
		font-size:18px;
		font-weight: 600;
		color: #000000;
		margin-left:11px;
	}
	.log-right {
		font-size:16px;
		color: #000000;
		font-family: "楷体";
		font-weight: 600;
		margin-left:245px;
	}
/*----------------------- container中间-----------------*/
	#content {
		text-align: center;
		margin-top:30px;
	}	
/*------------------------- 文字 ----------------------*/
   #content .van-image{
	   border: 2px solid honeydew;
   }
	.log-p {
		margin-top: 18px;
		margin-bottom:41px;
		font-size: 18px;
		font-family: "楷体";
		font-weight: 600;
	}
/*---------------------- 输入框------------------------ */
	.log-ipt {
		border: 0;
		color: #000;
		font-size: 22px;
		font-family: "楷体";
		width: 342px;
		border-bottom: 1px solid #eeeeee;
		margin-bottom: 38px;
	}
/*---------------------------- 按钮 --------------------*/
	.log-login {
		width: 342px;
		height:47px;
		opacity: 0.6;
		font-family: "楷体";
		font-size:20px;
		line-height:47px;
	}
/*--------------------footer 第三方链接 ----------------*/
	footer {
		text-align: center;
	}
	.log-link{
		font-size:14px;
		font-family: "楷体";
		margin-top: 110px;
		margin-bottom:19px;
	}
	/* 链接图片 */
	.log-linkpic {
		display: flex;
		justify-content: space-around;
		margin-bottom: 18px;
	}
	.log-pics {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.log-pics .icon{
		font-size:30px;
	}
	.log-pics .icon-weixindenglu{
		color: #08bd16;
	}
	.log-pics .icon-QQ1{
		color: #1aaaff;
	}
	.log-pics .icon-zhifubao{
		color: #1fabe9;
	}
	.log-pics .icon-weibo{
		color: #da2417;
	}
	.log-linkpic .log-pics p{
		color: #9d9d9d;
		font-size:13px;
		margin-top: 9px;
	}
	/* 帮助电话 */
	.log-tel {		
		position: absolute;
		bottom:20px;
		left:123px;
		color: #5d5d5d;
		font-size: 11px;
		font-family: "楷体";
	}
</style>
